import { useRouter } from "@tarojs/taro";
import { PageContainer, View } from "@tarojs/components";

import ByCol from "@/components/ui/ByCol";
import ByRow from "@/components/ui/ByRow";
import Page from "@/components/common/Page";
import ByText from "@/components/ui/ByText";
import ByCell from "@/components/ui/ByCell";
import Card from "@/components/common/Card";
import ByButton from "@/components/ui/ByButton";
import ByImageGroup from "@/components/ui/ByImageGroup";
import ApprovalaProcess from "@/components/app/ApprovalaProcess";

import ApiWorkflow from "@/api/workflow";
import useFetch from "@/hooks/useFetch";
import useApproval from "@/hooks/useApproval";
import useTransInstance from "@/hooks/useTransInstance";

import { TaskDetail } from "@/types/global";

const RowTitle = ({
  title,
  noMargin,
}: {
  title: string;
  noMargin?: boolean;
}) => {
  return (
    <View className={`${noMargin ? "" : "mb-3"} text-third text-sm`}>
      {title}
    </View>
  );
};

export default () => {
  const { params } = useRouter();

  const { data, refresh } = useFetch<TaskDetail>(ApiWorkflow.detail, "GET", {
    defaultParams: [{ workflowInstanceId: params.wl_id }],
    showLoading: true,
  });

  // 目前不清楚干嘛的了
  // const { data: applyDetail } = useFetch(ApiFinance.payrollApplyDetail, {
  //   manual: true,
  //   defaultParams: [{ payrollApplyId: Number(params.businessId) }],
  // });

  // 审批结果
  const {
    visible,
    approverNode,
    setApproveNode,
    PopupApproval,
    onApproved,
    onRejected,
    onCancal,
  } = useApproval(refresh);

  const instanceObj = useTransInstance(data?.instanceData);
  const wokers = instanceObj["Details2"]?.["valueData"];
  return (
    <>
      <Page
        footerSticky
        slotFooter={
          !!approverNode && (
            <ByRow>
              <ByButton
                type="error"
                size="large"
                variant="filled"
                className="flex-1"
                onClick={onRejected}
              >
                驳回
              </ByButton>
              <ByButton
                size="large"
                className="flex-2 ml-3"
                onClick={onApproved}
              >
                通过
              </ByButton>
            </ByRow>
          )
        }
      >
        <View className="p-3">
          <Card className="mb-6">
            <ByCell label="申请编号" vertical size="small">
              {instanceObj["PayrollApplyNo"]?.value}
            </ByCell>

            <ByCell label="项目详情" vertical size="small">
              <View>
                <ByText bold size="lg">
                  {data?.customerName}
                </ByText>
                <ByText block size="sm" type="third">
                  {instanceObj["DecorationFullAddress"]?.value}
                </ByText>
              </View>
            </ByCell>

            <View className="mb-6"></View>

            <ByRow className="mb-6">
              <ByCol span={6}>
                <ByCell vertical label="付款类别">
                  {data?.workflowDefinitionName}
                </ByCell>
              </ByCol>
              <ByCol span={6}>
                <ByCell vertical label="项目阶段">
                  {instanceObj["WorkerType"]?.value}
                </ByCell>
              </ByCol>
            </ByRow>

            <View className="mb-6">
              <ByRow>
                <ByCol span={6}>
                  <RowTitle title="收款对象" />
                </ByCol>
                <ByCol span={6}>
                  <RowTitle title="付款金额" />
                </ByCol>
              </ByRow>

              {wokers?.map((e, index) => (
                <ByRow className="mb-2 items-center" key={index}>
                  <ByCol span={6}>{e["工人"]}</ByCol>
                  <ByCol span={6}>¥{e["金额"]}</ByCol>
                </ByRow>
              ))}
            </View>

            <View className="mb-6">
              <ByCell label="备注" vertical>
                {instanceObj["Remark"]?.value || "-"}
              </ByCell>
            </View>

            <ByCell vertical label={<RowTitle title="附件" noMargin />}>
              <ByImageGroup size={140} urls={instanceObj['Files']?.valueData} showEmptyTip />
            </ByCell>
          </Card>

          {data && (
            <Card className="mb-4">
              <ApprovalaProcess
                showTitle
                source={data}
                onChangeStatus={setApproveNode}
              />
            </Card>
          )}
        </View>
      </Page>

      <PageContainer round show={visible} onAfterLeave={onCancal}>
        <PopupApproval />
      </PageContainer>
    </>
  );
};
